<template>
  <div class="hello">
    <h1>{{ store.name+msg }}</h1>
    <h2>state</h2>
    <h3>store.state值：{{ store.count }}</h3>
    <h3>store.state值：{{ store.name }}</h3>
    <h2>getters</h2>
    <h3>store.getters值：{{ store.double }}</h3>
    <h3>store.getters值(访问其他getter)：{{ store.getOtherGetter }}</h3>
    <h3>store.getters值(带参数)：{{ store.getUserById(1) }}</h3>
    <h3>store.getters值(访问其他store的getter)：{{ store.getOtherStoreGetter }}</h3>
    <h2>action</h2>
    <button @click="handleClick">调用action增加state</button>
    <button @click="handleClick2">调用异步action修改name</button>
    <h2>setup模式定义的store</h2>
    <h3>state:{{setupStore.data}}</h3>
    <h3>解构的值：{{data}}</h3>
    <h3>{{setupStore.getData()}}</h3>
    <h3>{{getData()}}</h3>
    <button @click="handleClick3">调用异步action修改name</button>
  </div>
</template>
<script setup>
  // 获取stor e
  import {useCounterStore} from '../store/index'
  const store = useCounterStore()
  // 访问store
  store.count++
  console.log(store.name) 
  // 访问getters
  console.log(store.count) 
  console.log(store.getUserById(1))
  
  function handleClick(){
    // 调用action
    store.increment()
  }
  function handleClick2(){
    // 调用异步action
    store.getUserInfo('rzz')
  }

// 获取 setup模式定义的store
  import {useSetupStore} from '../store/setupStore'
  import {storeToRefs} from 'pinia'

  console.log('setup模式定义的store')
  const setupStore = useSetupStore()

// 直接解构会失去响应性
  // const {data} = useSetupStore()
// 可以使用 storeToRefs 解构
  const {data} = storeToRefs(useSetupStore())
  const {getData} = setupStore

  function handleClick3(){
    // 调用异步action
    setupStore.increment()
  }
</script>
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
